<!DOCTYPE html>
<html>
	<head>
		<title>Argus: hijacking status map</title>
		<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
		<meta charset="utf-8">
		
		<style>
		html, body, optgroup, #map_canvas {
			font-size: 20pt;
			height: 100%;
			margin: 0px;
			padding: 0px
		}
		.customBox {
			font-size: 14pt;
			width: 300px;
			height: 200px;
			border-style: ridge;
			border-width: 6px;
			border-color: red;
			background-color: #A2C1EE;
			position: absolute
		}

		</style>
</head>
<body onload="initializemap()">
    <div>
        <table width="100%"><tr>
          <td>
	    <input type="button" value="监测点分布图" onClick="monitor()"  style='font-size:14pt;'>
	  </td>
	  <td align='center'>
            时间段：<select id="days" style='font-size:14pt;'>  
			  <option value="7">一周</option>  
			  <!--<option value="30">one month</option>  
			  <option value="60">three months</option>
			  <option value="180">six months</option>  -->
			  <option value="360">一年</option>  
			  <option value="720" selected="selected">两年</option>  
			</select> 
            IP类型：<select id="iptype" style='font-size:14pt;'>  
			  <option value ="0" selected="selected">IPv4</option>  
			  <option value ="1">IPv6</option>  
			</select> 
            <input type="button" value="路由监测结果" onClick="filter()"  style='font-size:14pt;'>
	  </td>
	  <td align='right'>
            <input type="button" value="访问统计结果" onClick="visitor()"  style='font-size:14pt;'>
	  </td>
<!--	  <td align='right'>
	 	<a href="/"  target="_blank"> Argus主页</a> <a> &nbsp </a>
	 	<a href="/vmap"  target="_blank"> 访问统计 </a>
	  </td>
-->
        </tr></table>
    </div>
	<script src="/static/jquery-latest.js"></script>
	<script src="http://api.map.baidu.com/api?v=2.0&ak=uVMIC3EBblCElaQyzEcAmnO3"></script>
	<script src="/static/textoverlay-baidu.js"></script>
	<script type="text/javascript">
	function HijackingPoint(lat,longi,pfx,aid,time){
		this.lat = lat;
		this.longi = longi;
		this.pfx = pfx;
		this.aid = aid;
		this.time = time;
	}
	var allpoints_v4 = new Array();
	var allpoints_v6 = new Array();
	var markerlist_v4 = new Array();
	var markerlist_v6 = new Array();
	var visitorlist = new Array();
	var monitorlist = new Array();
	var map;
	var status="none";
	var customText;
	var totalmonitors=382;

    function initializemap() {
		var zoomlevel = 3;
		if (screen.height > 2000){
			zoomlevel = 5;
		}
		else if (screen.height > 1000) {
			zoomlevel = 4;
		}

		map = new BMap.Map(document.getElementById("map_canvas")); 
		map.centerAndZoom(new BMap.Point(5, 15), zoomlevel);
		map.addControl(new BMap.MapTypeControl());
		map.setCurrentCity("北京");  
		top_left_control = new BMap.ScaleControl({anchor: BMAP_ANCHOR_TOP_LEFT});// 左上角，添加比例尺
		top_left_navigation = new BMap.NavigationControl();  //左上角，添加默认缩放平移控件
		map.addControl(top_left_control);        
		map.addControl(top_left_navigation);  
		
		var redimage = new BMap.Icon("/static/mm_20_red.png", new BMap.Size(12,24), {anchor: new BMap.Size(6, 20)});
		
		{% if points_v4 %}
		{% for point in points_v4 %}
			//var pointObj = new HijackingPoint({{point.lat}}, {{point.longi}},"{{point.pfx}}", {{point.aid}});
			allpoints_v4.push(new HijackingPoint({{point.lat}}, {{point.longi}},"{{point.pfx}}", {{point.aid}}, {{point.time}}));
		{% endfor %}
		{% endif %}
		{% if points_v6 %}
		{% for point in points_v6 %}
			//var pointObj = new HijackingPoint({{point.lat}}, {{point.longi}},"{{point.pfx}}", {{point.aid}});
			allpoints_v6.push(new HijackingPoint({{point.lat}}, {{point.longi}},"{{point.pfx}}", {{point.aid}}, {{point.time}}));
		{% endfor %}
		{% endif %}
		for(var i = 0; i < allpoints_v4.length; i++){
		    var marker = new BMap.Marker(new BMap.Point(allpoints_v4[i].longi + Math.random() * 0.2 - 0.1, allpoints_v4[i].lat + Math.random() * 0.2 - 0.1), {icon:redimage, title:allpoints_v4[i].pfx});
		    marker.url = "/aspathbd/" + allpoints_v4[i].aid;
		    marker.enableDragging();
		    marker.addEventListener("click",function(e) {
					window.open(this.url);
			});
		    markerlist_v4.push(marker);
		    map.addOverlay(marker);
		    marker.hide();
		}
		for(var i = 0; i < allpoints_v6.length; i++){
		    var marker = new BMap.Marker(new BMap.Point(allpoints_v6[i].longi + Math.random() * 0.2 - 0.1, allpoints_v6[i].lat + Math.random() * 0.2 - 0.1), {icon:redimage, title:allpoints_v6[i].pfx});
		    marker.url = "/aspath/" + allpoints_v6[i].aid;
		    marker.enableDragging();
		    marker.addEventListener("click",function(e) {
					window.open(this.url);
			});
		    markerlist_v6.push(marker);
		    map.addOverlay(marker);
		    marker.hide();
		}

		var icon1 = new BMap.Icon("/static/mm_20_blue.png", new BMap.Size(6,16), {anchor: new BMap.Size(3, 8), imageSize: new BMap.Size(6,20)});
		var icon2 = new BMap.Icon("/static/mm_20_purple.png", new BMap.Size(12,24), {anchor: new BMap.Size(6, 24), imageSize: new BMap.Size(12,20)});
		var icon3 = new BMap.Icon("/static/mm_20_yellow.png", new BMap.Size(18,30), {anchor: new BMap.Size(9, 30), imageSize: new BMap.Size(18,30)});
		var icon4 = new BMap.Icon("/static/mm_20_red.png", new BMap.Size(24,40), {anchor: new BMap.Size(12, 40), imageSize: new BMap.Size(24,40)});

                {% for c in citys %}{% if c.pageview %}
		    var marker = new BMap.Marker(new BMap.Point({{c.longitude}}, {{c.latitude}}), {icon:icon{{c.pageview}}, title:'{{c.name}}'});
		    visitorlist.push(marker);
		    map.addOverlay(marker);
		    marker.hide();
                {% endif %}{% endfor %}

		var purplebulb = new BMap.Icon("/static/purple-bulb.png", new BMap.Size(32,32), {anchor: new BMap.Size(16, 16), imageSize: new BMap.Size(32,32)});

                {% for point in monitors %}
		    var pos;
		    if({{point.eye_id}}==0) {
			pos = new BMap.Point({{point.longi}}, {{point.lat}}); 
		    } else {
			pos = new BMap.Point({{point.longi}} + Math.random() * 6 - 3, {{point.lat}} + Math.random() * 6 - 3);
		    }
		    var marker = new BMap.Marker(pos, {icon:purplebulb, title:"Monitor ".concat({{point.eye_id}}).concat("@AS ").concat({{point.asn}})});
                    monitorlist.push(marker);
		    map.addOverlay(marker);
                {% endfor %}

		//use TxtOverlay
          	customText="<div style=\"font-weight:bold\"><table width=100%><tr><td style=\"font-size:16pt;text-align:center\">Argus路由监测系统统计数据</td></tr><tr><td id=\"num_points\"><ul><li>使用了全球共<span style=\"color:red\">" + totalmonitors + "</span>个监测点</li></ul></td></tr></table></div>";
		txt = new TxtOverlaybd(new BMap.Point(-130, -10),customText,"customBox");
		map.addOverlay(txt);
		status='monitor';
	}


	function removeAllMarkers(){
		if(status == "filter") {
			for (var i = 0; i < markerlist_v4.length; i++) {
				markerlist_v4[i].hide();
			}
			for (var i = 0; i < markerlist_v6.length; i++) {
				markerlist_v6[i].hide();
			}
		}
		else if(status == "visitor") {
			for (var i = 0; i < visitorlist.length; i++) {
                                visitorlist[i].hide();
                        }
		}
                else if(status == "monitor") {
                        for (var i = 0; i < monitorlist.length; i++) {
                                monitorlist[i].hide();
                        }
                }
	}
	function filter() {
		var days = parseInt($("#days ").val());
		var time="两年";
		var ipt="IPv4";
		if(days==7) {
			time="一周";
		}
		else if(days==360) {
			time="一年";
		}
		var iptype = parseInt($("#iptype ").val());
		var deadline = parseInt({{curtime}}) - 3600*24*days;
		var numToShow = 0;
		removeAllMarkers();
		status = "filter";
		if(iptype == 0){
			ipt="IPv4";
			for(var i = 0; i < allpoints_v4.length; i++){
				if( allpoints_v4[i].time > deadline){
					markerlist_v4[i].show();
					numToShow++;
				}
			}
		}
		else{
			ipt="IPv6";
			for(var i = 0; i < allpoints_v6.length; i++){
				if(allpoints_v6[i].time > deadline){
					markerlist_v6[i].show();
					numToShow++;
				}
			}
		}
		$("#num_points").html("<ul><li><span style=\"color:red\">" + time + "</span>内共监测到<span style=\"color:red\">" + numToShow + "</span>个" + ipt + "前缀劫持事件</li></ul>");
	}
	function visitor() {
		removeAllMarkers();
		status = "visitor";
		var l = visitorlist.length;
		for(var i=0; i< l; i++) {
			visitorlist[i].show();
		}
		//$("#num_points").html("<ul><li>自2011年底以来已获得共<span style=\"color:red\">" + {{visitors}} + "</span>次访问</li></ul><table width=100%><tr><td> <img src='/static/mm_20_blue.png'>1~9 PV</img></td> <td> <img src='/static/mm_20_purple.png'>10~99 PV</img> </td></tr><tr><td> <img src='/static/mm_20_yellow.png'>100~999 PV</img></td><td> <img src='/static/mm_20_red.png'>1000+ PV</img></td></tr></table>");
		$("#num_points").html("<ul><li>自2011年底以来已获得共<span style=\"color:red\">" + {{visitors}} + "</span>次访问<table width=100%><tr><td> <img src='/static/mm_20_blue.png'>1~9 PV</img></td> <td> <img src='/static/mm_20_purple.png'>10~99 PV</img> </td></tr><tr><td> <img src='/static/mm_20_yellow.png'>100~999 PV</img></td><td> <img src='/static/mm_20_red.png'>1000+ PV</img></td></tr></table></li></ul>");
	}
	function monitor() {
		removeAllMarkers();
		status = "monitor";
		totalmonitors = monitorlist.length;
		for(var i=0; i< totalmonitors; i++) {
			monitorlist[i].show();
		}
		$("#num_points").html("<ul><li>使用了全球共<span style=\"color:red\">" + totalmonitors + "</span>个监测点</li></ul>");
	}
</script>
  <div id="map_canvas"></div>
</body>
</html>
